<template>
  <div class="rightBodyContent">
    <div class="rightBodyContent-in">
      <div class="hearder-search">
        <div class="toplineBox mb-10">
          <div class="toplineBox-left">
            <el-button size="small" @click="InitFn"><i class="el-icon-refresh"></i>刷新</el-button>
            <el-button size="small" @click="gotoDetail()" type="primary"><i class="el-icon-plus"></i>添加类目</el-button>
            <div class="searchBox">
              <el-input placeholder="区角名称" v-model="cornerSearchName"></el-input>
              <el-button size="small" type="primary" @click="InitFn">搜索</el-button>
            </div>
          </div>
          
          <p class="numberline toplineBox-right">总{{ arryList.length }}条</p>
        </div>
      </div>
      <div class="table-body">
        <div class="table-body-box">
          <el-table
              ref="multipleTable"
              :data="arryList"
              :stripe="tableStyle.tableStripe"
              :border="tableStyle.tableBorder"
              tooltip-effect="dark"
              style="width: 100%"
              header-cell-class-name="table-text-c"
              cell-class-name="table-text-c">
<!--            <el-table-column-->
<!--                prop="id"-->
<!--                label="ID"-->
<!--                width="80">-->
<!--            </el-table-column>-->
            <el-table-column
                label="现场图片"
                width="100">
              <template slot-scope="scope">
                <!--                <viewerModle type="1" :imgSrc="scope.row.pic"></viewerModle>-->
                <ImagePreview :src="scope.row.pic" width="40px" height="40px"></ImagePreview>
              </template>
            </el-table-column>
            <el-table-column
                prop="name"
                label="区角名称">
            </el-table-column>
            <el-table-column
                prop="time"
                label="达标时长/分钟">
            </el-table-column>
            <el-table-column
                prop="one_time"
                label="每节课时长/分钟">
            </el-table-column>
            <el-table-column
                prop="base_score"
                label="基本分值">
            </el-table-column>
<!--            <el-table-column-->
<!--                prop="create_time"-->
<!--                label="创建时间">-->
<!--            </el-table-column>-->
            <el-table-column
                label="操作"
                width="220">
              <template slot-scope="scope">
                <el-button type="primary" size="mini" @click="gotoDetail(scope.row.id)" plain>详情</el-button>
                <el-button size="mini" @click="cateId=scope.row.id,ruleVisible=true" plain>规则</el-button>
                <el-button plain type="danger" size="mini" @click="detelTearch(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <addCate :visible.sync="warehouseVisible" :warehouseId="cateId" @InitFn="InitFn"></addCate>
      <editCornerCateRule :visible.sync="ruleVisible" :cateId="cateId"></editCornerCateRule>
    </div>
  </div>
</template>

<script>
import {pagination, tableoption} from '@/utils/util.js'
import addCate from "./components/addCate";
import {cornerCateIndex, cornerCateDelete} from '@/api/admin/corner'
import editCornerCateRule from "./components/editCornerCateRule";

export default {
  components: {
    addCate,
    editCornerCateRule
  },
  data() {
    return {
      cornerSearchName:'',
      warehouseVisible: false,
      arryList: [], // 页面数据列表
      // 搜索设置
      // 设置table样式
      tableStyle: tableoption,
      cateId: 0,
      ruleVisible: false
    }
  },
  created() {
    this.InitFn()
  },
  methods: {
    // 初始化
    InitFn() {
      cornerCateIndex({p: 1,name:this.cornerSearchName}).then(res => {
        console.log('res:', res)
        for(let item of res.list){
          item.create_time = item.create_time.split(' ')[0]
        }
        this.arryList = res.list
      })
    },
    gotoDetail(id) {
      this.cateId = id || 0
      this.warehouseVisible = true
      // this.$router.push('classDetail?editId=' + editId)
    },
    detelTearch(item) {
      this.$confirm('确认删除【' + item.name + ' 】类目, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.detelRespon(item)
      }).catch(() => {
      })
    },
    detelRespon(item) {
      cornerCateDelete({id: item.id}).then(res => {
        if (!res.code) {
          this.InitFn()
          this.$message.success('删除成功!')
        } else {
          this.$message.error(res.msg)
        }
      })
    }
  },
  // 缓存机制end
  mounted() {
  }
}
</script>
<style scoped>
.searchBox{
 width: 280px;
 display: flex;
 align-items: center;
 justify-content: space-around;
}
.searchBox .el-input{
  width: 200px;
}
</style>
